<template>
  <div class="shop-nav">
    <div class="shop-nav-content">
      <span class="nav-title">项目分类:&nbsp;</span>
      <div class="nav-content">
        <ul class="nav-content-tag">
          <li class="tag-item" :class="{ 'tag-item-active': activeItemProject == index }"
            v-for="item, index of navItemListProject" :key="item.name" @click="activeProjectFunc(item, index)">{{
              item.label
            }}</li>
        </ul>
      </div>
    </div>
    <div class="shop-nav-content">
      <span class="nav-title">热门分类:&nbsp;</span>
      <div class="nav-content">
        <ul class="nav-content-tag">
          <li class="tag-item" :class="{ 'tag-item-active': activeItemHot == index }"
            v-for="item, index of navItemListHot" :key="item.name" @click="activeHotFunc(item, index)">{{ item.label }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"
import { useRoute, useRouter } from "vue-router"
// 路由
const route = useRoute()
const router = useRouter()

// 标签导航栏itemList
const navItemListProject = reactive([
  {
    label: '全部',
    name: 'all'
  },
  {
    label: '前端项目',
    name: 'frontend'
  },
  {
    label: '后端项目',
    name: 'backend'
  },
  {
    label: '微信小程序',
    name: 'miniProgram'
  },
  {
    label: 'App',
    name: 'app'
  },
  {
    label: 'Vue',
    name: 'vue'
  },
  {
    label: 'React',
    name: 'react'
  },
  {
    label: 'HTML',
    name: 'html'
  },
  {
    label: 'JavaScript',
    name: 'javascript'
  },
  {
    label: 'TypeScript',
    name: 'typescript'
  },
  {
    label: 'Java',
    name: 'java'
  },
  {
    label: 'Python',
    name: 'python'
  },
])
const navItemListHot = reactive([
  {
    label: '最新',
    name: 'new'
  },
  {
    label: '热门',
    name: 'hot'
  },
  {
    label: '精选',
    name: 'selected'
  },
])
// nav item active状态
const activeItemProject = ref(0)
const activeItemHot = ref(0)
// nav item 选中方法
const activeProjectFunc = (item: any, index: number) => {
  activeItemProject.value = index
  handleTagClickEvent(item.label)
}
const activeHotFunc = (item: any, index: number) => {
  activeItemHot.value = index
}

// tag点击事件
const handleTagClickEvent = (tag: any) => {
  router.push({
      path: '/codeTrade',
      query: {
        proTag: tag,
      }
    })
    clearArrFunc();
}

// 定义清空项目/委托数组，重新获取项目/委托事件
const emit = defineEmits(['clearArrEvent'])
// 触发切换登录注册事件的方法
const clearArrFunc = () => {
  emit('clearArrEvent')
}
</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色
@item-hover: #ff8a5e; // nav item hover的颜色
@item-active: #ff723e; // nav item active的颜色

.shop-nav {
  height: 110px;
  margin: 20px 20px 0 20px;
  border: 2px solid @border-color;

  &-content {
    height: 60px;

    display: flex;
    padding: 0 20px;
    text-align: center;

    span {
      height: 50px;
      padding: 0 10px;
      font-weight: 700;
      line-height: 50px;
    }

    .nav-content {
      flex: 1;

      .nav-content-tag {
        height: 50px;
        overflow: auto;
        line-height: 50px;

        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .tag-item {
          padding: 0 20px;
        }

        .tag-item:hover {
          color: @item-hover;
          cursor: pointer;
        }

        .tag-item-active {
          color: @item-active;
        }
      }
    }
  }
}
</style>